<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyServer-ServerList</title>
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue-2.6.10.js"></script>
    <script src="../js/date-format.js"></script>
    <!-- Element UI -->
    <script src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/element-css/index.css">
    <link rel="stylesheet" href="../css/element-css/table.css">
    <link rel="stylesheet" href="../css/element-css/container.css">

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        /* status color */
        .status-0 {
            color: #67C23A;
        }

        .status-1 {
            color: #E6A23C;
        }

        .status-2 {
            color: #F56C6C;
        }

        .header-bread {
            background-color: inherit;
        }
    </style>
</head>

<body>

    <div id="app">
        <el-container>
            <el-header class="header-bread">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px;">
                    <el-breadcrumb-item :to="{ path: '/' }">EasyServer</el-breadcrumb-item>
                    <el-breadcrumb-item>服务列表</el-breadcrumb-item>
                  </el-breadcrumb>
            </el-header>
            <template>
                <el-table :data="serviceList" stripe highlight-current-row>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="props.row.serviceInfos" max-height="360" stripe border
                                style="width: 100%">
                                <el-table-column label="IP地址" prop="ip">
                                </el-table-column>
                                <el-table-column label="端口" prop="port">
                                </el-table-column>
                                <el-table-column label="注册时间" prop="registerTime">
                                    <template slot-scope="scope">
                                        <i class="el-icon-time"></i>
                                        <span>{{ scope.row.registerTime | formatTime }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态">
                                    <template slot-scope="scope">
                                        <span
                                            :class="'status-' + scope.row.status">{{ scope.row.status | serverStatus }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="服务名">
                        <template slot-scope="scope">
                            <span>{{ scope.row.serviceName.toUpperCase() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span :class="'status-' + scope.row.status">{{ scope.row.status | serviceListStatus }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="总服务数量" prop="totalCount">
                    </el-table-column>
                    <el-table-column label="可用服务数量" prop="validCount">
                    </el-table-column>
                </el-table>
            </template>
        </el-container>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                refreshPerSecond: 5,
                serviceList: [{
                    serviceName: 'goods-provider',
                    status: 0,
                    totalCount: 5,
                    validCount: 5,
                    serviceInfos: [{
                        ip: '127.0.0.1',
                        port: '8080',
                        registerTime: '2020/5/1 14:02:32',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8081',
                        registerTime: '2020-5-9 8:22:42',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8082',
                        registerTime: '2020/5/10 18:02:32',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8083',
                        registerTime: '2020/5/15 18:02:32',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8084',
                        registerTime: '2020/5/20 18:02:32',
                        status: 0
                    }]
                }, {
                    serviceName: 'goods-consumer',
                    status: 1,
                    totalCount: 5,
                    validCount: 3,
                    serviceInfos: [{
                        ip: '127.0.0.1',
                        port: '8080',
                        registerTime: '2020/5/1 14:02:32',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8081',
                        registerTime: '2020-5-9 8:22:42',
                        status: 1
                    }, {
                        ip: '127.0.0.1',
                        port: '8082',
                        registerTime: '2020/5/10 18:02:32',
                        status: 2
                    }, {
                        ip: '127.0.0.1',
                        port: '8083',
                        registerTime: '2020/5/15 18:02:32',
                        status: 0
                    }, {
                        ip: '127.0.0.1',
                        port: '8084',
                        registerTime: '2020/5/20 18:02:32',
                        status: 0
                    }]
                }, {
                    serviceName: 'order-provider',
                    status: 2,
                    totalCount: 0,
                    validCount: 0,
                    serviceInfos: []
                }]
            },
            methods: {
                
            },
            filters: {
                formatTime(time) {
                    return new Date(time).format("yyyy-MM-dd hh:mm:ss");
                },
                serverStatus(status) {
                    switch (status) {
                        case 0:
                            return 'alive';
                        case 1:
                            return 'warning';
                        case 2:
                            return 'dead';
                        default:
                            return 'unknown';
                    }
                },
                serviceListStatus(status) {
                    switch (status) {
                        case 0:
                            return 'ok';
                        case 1:
                            return 'warning';
                        case 2:
                            return 'error';
                        default:
                            return 'unknown';
                    }
                }
            },
            created() {
                axios.get("../dashboard/getAllServerList").then(res => {
                    if (res.status === 200) {
                        this.serviceList = res.data;
                    }
                });
            }
        });

    </script>

</body>

</html>